<template>
    <div>
      <!-- 主框架 -->
       <el-card class="maincard">
        <h1 >个人中心</h1>
        <el-row title="个人中心">
        <!-- 左侧列 -->
        <el-col :span="10" class="col">
          <el-card>
            <el-image class="image" src="src\assets\loginPic.jpg">  
            </el-image>
          </el-card>
        </el-col>
        <!-- 右侧列 -->
        <el-col :span="14" class="col">
          <el-card class="card">
            <!-- 头像区域 -->
            <div>
      <el-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
      <div class="demo-collapse">
        <!-- 数据展示区域 -->
    <el-collapse v-model="activeName" accordion style="font-size: 18px; font-weight: bold; color: #333;">
      <el-collapse-item title="工作信息" name="1" >
        <div>
          工号: {{ getUsername }}<br>
          职位：职工<br>
          单位：东软颐养中心
        </div>
      </el-collapse-item>
      <el-collapse-item title="个人信息" name="2">
        <div>
         姓名：{{Name}}<br>
         年龄：{{ Age }}<br>
         性别：{{ Gender }}<br>
         身份证号：{{Idnumber}}
        </div>
      </el-collapse-item>
      <el-collapse-item title="工作内容概述" name="3">
        <div>
        病人护理：提供日常护理服务，包括帮助病人进食、洗澡、穿衣和移动。<br>
        健康监测：监测病人的生命体征，如体温、血压、心率和呼吸率。<br>
        记录和报告：记录病人的健康状况和治疗进展，并向医疗团队报告。<br>
        紧急情况处理：在紧急情况下，迅速采取行动，如心肺复苏等。<br>
        病人权益保护：确保病人的隐私和权益得到尊重和保护。
        </div>
      </el-collapse-item>
      <el-collapse-item title="联系方式" name="4">
        <div>
          电话：{{Telephone}}<br>
          邮箱：{{ Mail }}
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
    </div>
 <div class="button">
    <el-button type="primary" @click="dialogVisible=true">修改</el-button>
 </div>
          </el-card>
        </el-col>
      </el-row>
       </el-card>
    </div>
<!-- 修改事件信息对话框 -->
<div>
  <div>
      <el-dialog v-model="dialogVisible" title="修改个人信息" width="500">
        <el-card>
          <el-form ref="formRef" :model="form" :rules="rules" label-width="auto" style="max-width: 600px">
            <el-form-item label="姓名：" prop="adminName">
              <el-input v-model="form.adminName" />
            </el-form-item>
            <el-form-item label="年龄：" prop="adminAge">
              <el-input v-model.number="form.adminAge" />
            </el-form-item>
            <el-form-item label="身份证号：" prop="adminIdnum">
              <el-input v-model="form.adminIdnum" />
            </el-form-item>
            <el-form-item label="电话：" prop="adminPhone">
              <el-input v-model="form.adminPhone" />
            </el-form-item>
            <el-form-item label="邮箱：" prop="adminMail">
              <el-input v-model="form.adminMail" />
            </el-form-item>
            <el-form-item>
              <el-button style=" margin-left: 85%; " type="primary" @click="onSubmit">提交</el-button>

            </el-form-item>
          </el-form>
        </el-card>
      </el-dialog>
    </div>
</div>

  </template>

  <script lang="ts" setup>
  import { ref, onMounted, reactive } from 'vue';
import { computed } from 'vue';
import { useStore } from 'vuex';
import * as nurse from '../../api/nurse.js' 
const dialogVisible = ref(false)
const store = useStore();
const getUsername = computed(() => store.getters.getUsername);
const activeName = ref('1')
// 显示个人信息功能
const nurseInfo=ref();
const Age = ref(0);
const Gender = ref<string>();
const Name = ref(0);
const Telephone = ref(0);
const Mail = ref(0);
const Idnumber = ref(0);
const Id = ref(0);
//修改个人信息内容


  onMounted(async () => {
  try {
    const response=await nurse.getNurseByUsernameAPI({nurseno:getUsername.value});
    nurseInfo.value = response.data;
    Id.value = nurseInfo.value.data[0].nurseId;
    Age.value = nurseInfo.value.data[0].nurseAge;
    Gender.value = nurseInfo.value.data[0].nurseGender
    Name.value = nurseInfo.value.data[0].nurseName;
    Idnumber.value =nurseInfo.value.data[0].nurseIdnum;
    Telephone.value = nurseInfo.value.data[0].nurseTelephone ? nurseInfo.value.data[0].nurseTelephone : "未填";
    Mail.value = nurseInfo.value.data[0].nurseMail ? nurseInfo.value.data[0].nurseMail : "未填";
    console.log('获取成功')
  } catch (error) {
    console.error('获取管理员信息失败:', error);
  }
});

// 修改个人信息功能
const form = reactive({
  nurseId: Id,
  nurseNo: getUsername,
  nurseName: Name,
  nurseAge: Age,
  nurseIdnum: Idnumber,
  nursePhone: Telephone,
  nurseMail: Mail,
})
// const onSubmit=(async()=>)

  </script> 






  <style lang="less" scoped>
  .maincard{
    width: 1000px;
  }
  .button{
    position: fixed;
    bottom: 450px;
    right: 200px;
  }
   .card{
    padding:10px;
    height: 100%;
   }
   .col{
    padding:10px;
   }
   .image{ 
    height: 400px; 
    padding: 10px;
    src:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" ;
    object-fit: contain;
   }
  </style>